<template>
  <div>
    <div @click="clickNum">{{num}}</div>
    <div @click="clickNum1(100)">{{num1}}</div>
    {{name}}

  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'FuncTest', // 组件名称
  setup (props, ctx) {
    let num1 = ref(10)
    let data = reactive({
      name: 'Jack',
      num: 15
    })
    let clickNum = () => {
      // 可以直接访问reactive定义的数据
      console.log('click num', data.num);
    }
    let clickNum1 = (val) => {
      // 访问ref定义的数据，需要写数据.value
      console.log('click num1', num1.value, val);
    }
    return {
      ...toRefs(data),
      num1,
      clickNum,
      clickNum1
    }
  }
})
</script>

<style lang="scss" scoped>
</style>